<template>
	<view>
    <uv-navbar  :autoBack="true" title="" bg-color="rgba(255,255,255,0)"  titleStyle="font-size:0">
        
    </uv-navbar>
     
		<view class=" " style="height:525rpx;">
			<swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots" style="text-align:center;height:525rpx;" 
				:autoplay="autoplay" :interval="interval" :duration="duration">
                <!-- v-for="(i,n) in imgList" :key="n" -->
				<swiper-item >
					<image style="width: 100%;height: 525rpx;" :src=" detailData.logo_image" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
        <view class="goods">
            <view class="goodsName align-center">
              {{detailData.name}} 
            </view>
          
            <view class="address justify-between align-start">
                <text>地址：</text>
                <view class="clamp2 flex1">
                    {{detailData.address}} 
        
                </view>
                <image class="mr15 "  @click="$utils.dh(detailData.name, detailData.pointlat,detailData.pointlng)" style="margin-left: 30rpx;" src="/static/images/middle/i7.png" mode="widthFix">
                </image>
                <image src="/static/images/middle/i6.png" @click="$utils.call(detailData.mobile)" mode="widthFix"></image>
            </view>
        </view>
		<view class="content bg100 plr15 pb50">
            
			
       
            
			
			<view class=" justify-between flex-wrap ">
                  <view class="peopleInfo bgWhite pb10" style="background-color: #fff;" v-for="(item,index) in gyList " :key="index" @click="toMain(item)">
                  	<image style="width: 340rpx;height: 262rpx;border-radius: 15rpx 15rpx 0 0 ;" :src="item.image"
                  		mode=""></image>
                  
                  	<view class=" flex-col bgWhite mlr10  mt12 justify-between ">
                  		<view class="clamp2 " style="font-weight: bold;font-size: 26rpx;color: #333;">
                  			 {{item.title}}
                  		</view>
                  		<view class="align-center dataPrice mt12 mb10">
                  					￥{{item.price}} <text class="linePirce">￥{{item.original_price}}</text>
                  		</view>
                  		<view class="align-center">
                            <image style="width: 28rpx;margin-right: 10rpx;" src="/static/images/middle/i11.png" mode="widthFix"></image>	
                            <view class="clamp" style="width: 80%;">
                                {{item.name}}
                            </view>
                  			
                  		</view>
                  	</view>
                  </view>     
                	
				
			</view>
            <view class="" v-if="gyList.length==0">
                <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
            </view>
		</view>
		<view class="cart justify-between align-center">
		    <view class="cartBox" @click="showCartList">
		        <image src="/static/images/middle/cart.png" mode="widthFix"></image>
		        <text class="cartNum">{{chosedArr.length}}</text>
		    </view>
		
		    <view class="buybtn" @click="pay">
		        立即下单
		    </view>
		</view>	
		<uv-popup ref="cartpopup" mode="bottom" round="16">
		    <view class="flex-col align-center plr13 pt22 ">
		       <view class="justify-between align-center pb15" style="width: 100%; border-bottom: 1px solid #F3F3F3">
		           <view class="" style="font-weight: bold;font-size: 34rpx;color: #333333;">
		               购物车
		           </view>
		           <view @click="resetCart" class="delCart align-center" style="font-size: 25rpx;color: #444444;">
		               <uv-icon  color="#8B8B8B" size="24" name="trash"> </uv-icon>
		                清空购物车
		           </view>
		       </view>
		       <view class="cartItem  justify-between" v-for="(item2,index2) in chosedArr" :key="index2">
		           <image :src="item2.image" mode=""></image>
		           <view class="flex1 flex-col justify-between" style="border-bottom: 1px solid #F3F3F3;padding-bottom: 32rpx;">
		               <view class="item-title">
		                   {{item2.title}}
		               </view>
		               <view class="item-content justify-between align-center">
		                   <text>￥{{item2.price}}</text>
		                  <!-- <view class="choseRule">
		                       选规格
		                   </view> -->
		                   <view class="align-center">
		                       <uv-icon color="#FF4345"   @click="delCart(item2)" size="24" name="minus-circle"> </uv-icon> <text
		                           class="mlr10">{{item2.goods_num}}</text> <uv-icon @click="addCart(item2)" size="24" color="#FF4345"
		                           name="plus-circle-fill"> </uv-icon>
		                   </view>
		               </view>
		           </view>
		       </view>
               
               <view class="" v-if="chosedArr.length==0">
               	<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
               </view>
		       <view class="ft11 mt15" style="color: #888;">
		           下单无需立即支付,最后统一到前台结账！
		       </view>
		       <view class="" style="height: 124rpx;width: 100%;">
		       </view>
		    </view>
		</uv-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                list:[
                    
                ],
				imgList: [],
				headerList: [],
				car_brand: [
					[],
					[]
				],
				areaRrand: [
					[],
					[]
				],
				areatype: 0,
				text: [],
				orderList: [],
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,

				AreaData: [],
				carColumnData: [],
				columnData: [],
				car_type: "",
				total_cart: 0,
				cateList: [],
                    
				gyList: [],
				yhList: [],
				orderList: [],
                lineBg:require('@/static/images/index/i1.png'),
                id:"",
                detailData:{},
                cate_id:"",
                page:1,
                storeGoods:[],
				chosedArr:[],
				windowHeight: uni.getStorageSync('menuInfo').windowHeight,
				height: 0,
				attrData: 0,
				id:'',
                loading:false
			}
		},
		onLoad(opt) {
			// this.getIndex()
			// this.getOrder()
			// this.getAreaList()
			// this.getCate()
			if(opt.id) this.id = opt.id
            this.getDetail()
            this.getGoodsCart()
            this.getShopAssistant()
		},
        onShareAppMessage: function() {
        	let that = this;
        	wx.showShareMenu({
        		withShareTicket: true,
        		menus: ['shareAppMessage', 'shareTimeline']
        	});
        	return {
        		title: '门店详情',
        		imageUrl: '',
        		path: '/pages/mall/index' 
        	};
        },
        onShareTimeline: function() {
        	let that = this;
        	return {
        		title: '门店详情',
        		imageUrl: '',
        		
        		
        	};
        },
		methods: {
            async getGoodsCart(){
             let  data=await this.$api.getMallCart({mall_id:this.id,page:this.page})
             console.log(data)
             this.chosedArr=data.list
            },
            async getShopAssistant(){
             let  data=await this.$api.mallGoods({mall_id:this.id,page:this.page})  
             this.gyList =[...this.gyList,...data.list]
             
            },
            async getCategory(){
             let  data=await this.$api.getShopCategory({shop_id:this.id})  
             console.log(data)
             this.list = data.list
             this.cate_id=data.list[0].id
             this.getStoreGoods()
            },
            
            async getStoreGoods(){
             let  data=await this.$api.getShopGoods({shop_id:this.id,cate_id:this.cate_id,page:this.page})  
             console.log(data)
             this.storeGoods=data.list
             
            },
            async getDetail(){
             let  data=await this.$api.mallInfo({mall_id:this.id})  
             
             this.detailData= data.info
            },
            click(e){
                console.log(e)
                this.cate_id=e.id
                this.storeGoods = []
                this.page=1
                this.getStoreGoods()
            },
			toUserList(){
				uni.navigateTo({
					url:'/pages/artist/index'
				})
			},
			toAct(){
				uni.navigateTo({
					url:'/pages/activity/index'
				})
			},
			toBooking(){
				uni.switchTab({
					url:'/pages/tabbar/chat'
				})
			},
			toApply(){
				uni.navigateTo({
					url:'/pages/artApply/index'
				})
			},
			
		

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item){
				uni.navigateTo({
					url: '/pages/equipmentMain/index?id=' + item.id
				})
			},
            toStoreGoods(){
                uni.navigateTo({
                	url: '/pages/goodsBuy/index?id=' + this.id 
                })
            },
            change(data){
             uni.navigateTo({
             	url: '/pages/addressMain/index?id=' + data
             })
            },
            showCartList(){
                this.$refs.cartpopup.open()   
            },
            addCart(item){
                if(this.loading) return
                this.loading=true
                this.$api.mallGoodsAdd({goods_id:item?.goods_id}).then(res=>{
                    console.log(res)
                    this.loading=false
                    this.getGoodsCart()
                }) 
            },
            delCart(item){
                if(this.loading) return
                this.loading=true
                let num = item.goods_num
                if(num>1){
                    num--
                     this.$api.mallGoodsEdit({goods_id:item.goods_id,goods_num:num}).then(res=>{
                         console.log(res)
                         this.loading=false
                         this.getGoodsCart()
                     })
                }else{
                    this.$api.mallGoodsDel({goods_id:item.goods_id}).then(res=>{
                        console.log(res)
                        this.loading=false
                        this.getGoodsCart()
                    })
                    this.loading=false
                }
               
            },
            async resetCart(){
                let res =  await this.$api.mallGoodsDelete()
                console.log(res)
                if(res.code==1){
                    uni.showToast({
                        title:'操作成功'
                    })
                    this.chosedArr=[]
                     this.$refs.cartpopup.close()   
                }else{
                    uni.showToast({
                        title:res.msg,
                        icon:"none"
                    })
                }
            },
            async pay(){
                if(!this.chosedArr.length) return  uni.showToast({
                        title:'请先添加商品到购物车',
                        icon:"none"
                    }) 
                    let str = JSON.stringify(this.chosedArr)
                    let res =  await this.$api.createMallOrder()
                    console.log(res)
                    if(res.code==1){
                        uni.showToast({
                            title:'操作成功'
                        })
                        setTimeout(()=>{
                            uni.navigateTo({
                                url:'/pages/order/index'
                            })
                        },1000)
                        this.chosedArr=[]
                         this.$refs.cartpopup.close()   
                    }else{
                        uni.showToast({
                            title:res.msg,
                            icon:"none"
                        })
                    }
                
            }
            
		},


	}
</script>
<style scoped lang="scss">
	.content {
		
		position: relative;
		z-index: 99;
	}

	.header {

	}

	
</style>
<style scoped lang="scss">
        .title{
            font-weight: bold;
            font-size: 36rpx;
            color: #111111;
        }
       
        .goods {
            position: relative;
            z-index: 9;
            margin: -80rpx 25rpx 20rpx;
            
                background: #fff;
                
                padding: 30rpx 28rpx;
                border-radius: 15rpx;
        
            .goodsName {
                font-weight: bold;
                font-size: 32rpx;
                color: #000000;
                margin-bottom: 30rpx;
            }
            font-size: 22rpx;
            color: #555555;
            .tag {
                min-width: 121rpx;
                text-align: center;
                height: 33rpx;
                background: #FEAB61;
                border-radius: 3rpx;
                display: inline-block;
                font-size: 22rpx;
                line-height: 33rpx;
                font-weight: 400;
                margin-left: 10rpx;
                color: #fff;
                box-sizing: border-box;
            }
        }
        
        
        .address {
            image {
                width: 52rpx;
            }
        }
		.dataPrice{
			font-weight: 500;
			font-size: 28rpx;
			color: #FF4345;
			.linePirce{
				font-weight: 400;
				font-size: 18rpx;
				color: #A9A9A9;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}
			
		.peopleInfo{
			font-weight: 400;
			font-size: 18rpx;
			color: #888888;
		}
		.cart {
		    width: 700rpx;
		    height: 104rpx;
		    background: #232426;
		    position: fixed;
		    left: 0;
		    right: 0;
		    margin: auto;
		    bottom: 18rpx;
		    border-radius: 50rpx;
		    z-index: 999999999;
		    image {
		        width: 72rpx;
		    }
		
		    .cartBox {
		        position: relative;
		        width: 72rpx;
		        height: 72rpx;
		        margin-left: 54rpx;
		
		        .cartNum {
		            display: inline-block;
		            width: 34rpx;
		            height: 34rpx;
		            position: absolute;
		            top: 0;
		            right: -20rpx;
		            background: #FF4345;
		            color: #fff;
		            text-align: center;
		            border-radius: 50%;
		            font-size: 28rpx;
		        }
		    }
		
		    .buybtn {
		        width: 214rpx;
		        border-radius: 0 50rpx 50rpx 0;
		        font-weight: bold;
		        font-size: 32rpx;
		        color: #FFFFFF;
		        text-align: center;
		        background-color: #00C584;
		        line-height: 104rpx;
		    }
		}
		
		   
		.cartItem{
		    width: 100%;
		    margin-top: 16rpx;
		    image{
		        width: 126rpx;
		        height: 128rpx;
		        margin-right: 23rpx;
		        border-radius: 16rpx;
		    }
		}
</style>